<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<style type="text/css">
    body {
        color: #333;
    }
	.dock {
	    position: fixed;
	    width: 100%;
	    top: 0;
	    left: 0;
	    height: 40px;
	    background-color: #d8ebed;
	    /*background-color: rgba(6,193,174,.1);*/
	    line-height: 40px;
	    padding: 0 15px;
	    z-index: 999;
	    /*box-shadow: 0 1px 3px rgba(0,0,0,.2);*/
	}
	.text-gray {
	    color: #666;
	    font-size: 14px;
	}
	.mui-scroll-wrapper {
	    top: 40px;
	}
</style>
</head>

<body>
    <div class="dock">
        <span class="text-gray">2016年8月</span>
        <a href="#jfPopover" class="mui-pull-right">更多<span class="mui-icon mui-icon-arrowdown"></span></a>
    </div>
    <div style="height: 40px;"></div>
    <!--下拉刷新容器-->
    <div id="refreshc" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--数据列表-->
            <ul id="refreshlist" class="mui-table-view mui-table-view-chevron">
            </ul>
        </div>
    </div>
    <div id="jfPopover" class="mui-popover" style="width: 160px;">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">去年</li>
            <li class="mui-table-view-cell">上季度</li>
            <li class="mui-table-view-cell">上个月</li>
            <li class="mui-table-view-cell">上周</li>
            <li class="mui-table-view-cell">当天</li>
        </ul>
    </div>
    <script src="../../js/mui.min.js"></script>
    <script type="text/javascript">
        (function($, doc) {
            var selector = '#refreshc';
            var count = 0;
            $.init({
                pullRefresh: {
                    container: selector,
                    down: {
                        callback: function() {
                            setTimeout(function() {
                                var table = document.body.querySelector('#refreshlist');
                                var cells = document.body.querySelectorAll('#refreshlist>.mui-table-view-cell');
                                for (var i = cells.length, len = i + 3; i < len; i++) {
                                    var li = document.createElement('li');
                                    li.className = 'mui-table-view-cell';
                                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                                    //下拉刷新，新纪录插到最前面；
                                    table.insertBefore(li, table.firstChild);
                                }
                                $(selector).pullRefresh().endPulldownToRefresh(); //refresh completed
                            }, 600);
                        }
                    },
                    up: {
                        auto: true,
                        callback: function() {
                            setTimeout(function() {
                                $(selector).pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
                                var table = document.body.querySelector('#refreshlist');
                                var cells = document.body.querySelectorAll('#refreshlist>.mui-table-view-cell');
                                for (var i = cells.length, len = i + 20; i < len; i++) {
                                    var li = document.createElement('li');
                                    li.className = 'mui-table-view-cell';
                                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                                    table.appendChild(li);
                                }
                            }, 600);
                        }
                    }
                }
            });
        })(mui, document);
    </script>
</body>

</html>